<template>
	<view class="wrap">
		<view class="top">
			欢迎使用车铠甲小程序
		</view>
		<view class="info">
			<view class="name">
				<input type="text" v-model="mobile" placeholder="请输入手机号" placeholder-style="font-family: HiraginoSansGB-W3;font-size: 30rpx;color: #999;"/>
			</view>
			<view class="password flex flex-between flex-v-center">
				<view class="testcode ">
					<input type="text" v-model="code" placeholder="请输入验证码" placeholder-style="font-family: HiraginoSansGB-W3;font-size: 30rpx;color: #999;"/>
				</view>
				
				<view class="code flex flex-v-center">
					<button :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
				</view>
			</view>
		</view>
		<view class="deal">
			<u-checkbox-group>
				<view class="flex flex-h-start flex-v-center">
					<u-checkbox v-model="checked"  icon-size="18" :size="36" @change="checkboxChange">
					</u-checkbox>
					<view class="deals flex flex-start">
						<text>我已阅读并同意</text>
						<navigator url=""> 《用户协议》《隐私声明》</navigator>
					</view>
				</view>
			
			</u-checkbox-group>
		</view>
		<view class="sub flex flex-h-center">
			<text class="flex flex-h-center flex-v-center" @click="login">
				登录
			</text>
		</view>
		<view class="footer" @click="$noMultipleClicks(getUserInfo)">
			<view class="title">第三方登录</view>
			<view class="icon">
				<image src="../../static/image/wx.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				mobile:'',
				code:'',
				btnDis: false,// 发送验证码按钮不禁用
				btnText: "发送验证码",// 提示
				url:"",
				noClick:true
			}
		},
		onShow() {
			console.log(uni.getStorageSync('token'))
			if(uni.getStorageSync('token')){
				uni.switchTab({
					url:"../tabbar/index"
				})
			}
			this.url = uni.getStorageSync('url');
			console.log(this.url)
		},
		onLoad() {
			
		},
		methods: {
			checkboxChange(e){
				
			},
			sendCode(){
				
				if (this.mobile=='') {
				   this.toastMsg("请输入手机号");
					return;
				}
				this.$https.request('/cli/sendCode',false, {
					mobile: this.mobile,
				}).then((res) => {
				    if(res.code==0){
				    this.LoadingMsg('发送成功');
				    setTimeout(() => {
				    	uni.hideLoading();
				    	this.countDown();
				    }, 1500);
				    }else{
						this.LoadingMsg(res.msg);
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);
					}
				})
			},
			// 验证码倒计时
			countDown() {
			  	// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `${timer}s`;
				t = setInterval(() => {
				// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			login() {
				if(!this.mobile){
					this.toastMsg("请输入手机号");
					
					return;
				}
				if(!this.code){
					this.toastMsg("请上传验证码");
					return;
					// return;
				}
				if(!this.checked){
					this.toastMsg("请勾选阅读协议");
					return;
					// return;
				}
				this.$https.request('/cli/codeLogin', false, {
					mobile: this.mobile,
					code:this.code
				}).then((res) => {
					if (res.code == 0) {
						
			            uni.setStorageSync('token', res.msg);
						this.LoadingMsg(res.msg);
			            setTimeout(() => {
			            	uni.hideLoading();
			            	if(this.url){
			            		uni.navigateTo({
			            			url:`/${url}`
			            		})
			            	}else{
			            		uni.switchTab({
			            			url:"../tabbar/index"
			            		})
			            	}
			            }, 1500);
					} else {
						this.LoadingMsg(res.msg);
						setTimeout(function() {
							uni.hideLoading();
						}, 1000)
					}
			
				})
			},
			getUserInfo() {
				var _this = this;
				uni.getUserProfile({
					desc: 'Wexin',
					success: function(res) {
						// console.log('wx.getUserProfile=>用户允许了授权');
						console.log(res.userInfo);
						let userInfo = res.userInfo;
						let name = userInfo.nickName; //昵称
						let img = userInfo.avatarUrl; //头像
						let gender = userInfo.gender; //昵称
			            uni.setStorageSync('headImg', img);
						console.log(gender);
			
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes.code)
								//非第一次授权获取用户信息
								// return;
								_this.$https.request('/cli/wxLogin?code=' + loginRes.code + '&avatar=' +
										img + '&nickname=' + name + '&sex=' + gender, false, {})
									.then((res) => {
			
										if (res.code == 0) {
											console.log(res);
											uni.setStorageSync('token', res.data.token);
											uni.setStorageSync('openId', res.data.openId);
											uni.setStorageSync('mobile', res.data.appUser.phoneNumber);
											uni.setStorageSync('nickname', res.data.appUser.nickName);
											if(res.data.appUser.phoneNumber){
												_this.LoadingMsg("授权成功，即将跳转...");
												setTimeout(function() {
													uni.hideLoading();
													if(_this.url){
														let url =_this.url
														uni.navigateTo({
															url:`/${url}`
														})
													}else{
														uni.switchTab({
															url:"../tabbar/index"
														})
													}
												}, 1000)
											}else{
												_this.LoadingMsg("授权成功，绑定手机...");
												setTimeout(function() {
													uni.hideLoading();
													if(_this.url){
														let url =_this.url
														uni.navigateTo({
															url:`/${url}`
														})
													}else{
														uni.switchTab({
															url:"../tabbar/index"
														})
													}
												}, 1000)
											}
											
											
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none'
											})
										}
									}).catch((res) => {
										console.log(res);
									});
			
							}
			
						});
			
			
					},
					fail(rs) {
						console.log(rs)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
   .wrap{
	   .footer{
		   position: fixed;
		   width: 100%;
		   display: flex;
		   justify-content: center;
		   flex-direction: column;
		   bottom: 85rpx;
		   .title{
			  font-family: HiraginoSansGB-W3;
			  font-size: 30rpx;
			  color: #999; 
			  padding-bottom: 48rpx;
			  display: flex;
			  justify-content: center;
			   width: 100%;
		   }
		   .icon{
			   display: flex;
			   justify-content: center;
			   width: 100%;
			   image{
				   width: 80rpx;
				   height: 80rpx;
			   }
		   }
	   }
	   .sub{
		  padding: 0 35rpx; 
		  text{
			  border-radius: 10rpx;
			  background-color: #2A90FF;
			  font-family: HiraginoSansGB-W3;
			  font-size: 30rpx;
			  color: #fff;
			  width: 100%;
			  height: 90rpx;
			  
		  }
	   }
	   .deal{
		   padding: 70rpx 35rpx 50rpx 35rpx;
		   text {
		   	font-family: HiraginoSansGB-W3;
		   	font-size: 24rpx;
		   	color: #666;
		   }
		   navigator{
		   	font-family: HiraginoSansGB-W3;
		   	font-size: 24rpx;
		   	color: #2A90FF;
		   }
	   }
	   .info{
		   .name{
			   padding:0 35rpx;
			   input{
				   width: 100%;
				   height: 100rpx;
				   padding-bottom: 35rpx;
			   }
		   }
		   .password{
			    padding: 0 35rpx; 
			   .testcode{
				   width: calc(100% - 115rpx);
				  
				   input{
					   height: 100rpx;
				   }
			   }
			   .code{
				   width: 150rpx;
				   height: 100rpx;
				   
				   button{
					   background-color: transparent;
					   border: none;
					   color: #2A90FF; 
					   font-family: HiraginoSansGB-W6;
					   font-size: 28rpx;
					   margin: 0;
					   padding: 0;
                       outline:none;
				   }
				   button::after{ 
				       border: none; 
				   }
			   }
		   }
	   }
	   .top{
		   font-family: HiraginoSansGB-W6;
		   font-size: 36rpx;
		   color: #000;
		   font-weight: 900;
		   padding: 120rpx 0 50rpx 35rpx;
	   }
   }
</style>
